@import '../../styles/scss/main.scss';

.about {
    display: flex;
    justify-content: center;
    .info-card {
        background-color: $default_color_White;
        height: 300px;
        display: flex;

        .header-img-bg {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 40%;
            .header-img {
                border-radius: 50%
            }
        }
        .info-content {
            display: flex;
            flex-direction: column;
        }
    }
}

@media screen and (min-width: 1024px) {
    .about {
        .info-card {
            width: 60%;
            flex-direction: row;
            justify-content: flex-start;
            margin-top: $default_header_height + 1em;
            .header-img-bg {
                .header-img {
                    width: 150px;
                    height: 150px;
                }
            }
            .info-content {
                justify-content: flex-start;
                .name {
                    margin-top: 30px;
                    font-size: 36px;
                    line-height: 48px;
                }
                .info {
                    margin-top: 50px;
                }
            }
        }
    }

}

@media screen and (max-width: 1023px) {
    .about {
        margin-top: $default_header_small_height+ 1em;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .about {
        .info-card {
            flex-direction: row;
            justify-content: flex-start;
            width: 60%;
            .header-img-bg {
                .header-img {
                    width: 120px;
                    height: 120px;
                }
            }
            .info-content {
                justify-content: flex-start;
                .name {
                    margin-top: 30px;
                    font-size: 24px;
                    line-height: 36px;
                }
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    .info-card {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        .header-img-bg {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 10px;

            .header-img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }
        .info-content {
            justify-content: center;
            .name {
                margin: 20px auto;
                font-size: 24px;
                line-height: 16px;
            }
            .info {

            }
        }
    }

}

